Základní grafické tvary

Třída Shape je odvozena od třídy UIElement. Získává tak vlastnosti typické pro ovládací prvky z rozhraní aplikace. Od této třídy jsou odvozeny už konkrétní základní typy: Rectangle (obdélník), Ellipse (elipsa), Line (úsečka), Polyline (složená čára) a Polygon (mnohoúhelník). U těchto tvarů stejně jako u ovládacích prvků je možné reagovat na události. V ukázkách kódu je použit layout Canvas pro umístění těchto tvarů. Na Obrázku 1 jsou zobrazeny všechny tyto tvary.

Obrázek 1 Základní grafické tvary [zdroj: vlastní]

WPF má jiný souřadnicový systém než je kartézský. Pro určení pozice elementu na layoutu nebo obecně v rozhraní aplikace je použit souřadnicový systém zařízení. Ten se liší od Kartézské soustavy souřadnic převrácením osy y. Počátek soustavy je umístěn v levém horním rohu layoutu nebo okna aplikace. Na Obrázku 2 je porovnání těchto dvou soustav souřadnic.

Obrázek 2 Porovnání soustav souřadnic [zdroj: vlastní]

Ukázkové řešení: 2D Grafika/SouradniceZarizeni

Vytvoření úsečky (Line)

<Line X1="20" Y1="40" X2="250" Y2="150" Stroke="Black" StrokeThickness="2"/>

X1,Y1 – souřadnice prvního bodu
X2,Y2 – souřadnice druhého bodu
Stroke – barva čáry
StrokeThickness – šířka čáry

Vytvoření obdélníku (Rectangle)

<Rectangle Canvas.Top="30" 
           Canvas.Left="25" 
           Width="120" 
           Height="120" 
           Stroke="Black" 
           StrokeThickness="2" 
           Fill="CornflowerBlue"/>

Canvas.Top – souřadnice od levého horního rohu /osa y)
Canvas.Left – souřadnice od levého horního rohu (osa x)
Width – šířka obdélníku
Height – výška obdélníku
Stroke – barva ohraničení obdélníku
StrokeThickness – šířka ohraničení
Fill – vyplnění obdélníku zadanou barvou

Vytvoření elipsy (Ellipse)

<Ellipse Canvas.Top="50" 
         Canvas.Left="25" 
         Width="120" 
         Height="60" 
         Stroke="Black" 
         StrokeThickness="2" 
         Fill="YellowGreen"/>

Atributy elementu Ellipse mají stejnou funkci jako u elementu Rectangle.

Vytvoření lomené čáry (Polyline)

<Polyline Points="100,20 20,100 150,100 100,20" 
          Stroke="Black" 
          StrokeThickness="2" 
          Fill="Crimson"/>

Polyline – vytvoří složenou čáru z úseček
Points – posloupnost bodů úseček

Vytvoření mnohoúhelníku (Polygon)

<Polygon Points="20,40 20,120 120,120 135,20" 
         Stroke="Black" 
         StrokeThickness="2" 
         Fill="BlanchedAlmond"/>

Princip vytváření mnohoúhelníku je stejný jako u Polyline. Rozdíl je v tom, že první a poslední bod se automaticky spojí.

Ukázkové řešení: 2D Grafika/ZakladniTvaryShape